<template>
  <el-row>
    <el-col :span="20" class="el-icon-user-solid"> {{ NodeInfo.name }}</el-col>
    <el-col :span="4">
      <span class="responsible-man">{{ NodeInfo.manager }}</span>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          操作
          <i class="el-icon-arrow-down" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <el-dropdown-item v-if="!isRoot" command="edit">查看部门</el-dropdown-item>
          <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
import { delDepts } from '@/api/departments'
export default {
  props: {
    // 接收的节点数据对象，包含name和manage属性
    NodeInfo: {
      type: Object,
      required: true
    },
    // 传递是否为顶层的标记，如果为true是顶层
    isRoot: {
      type: Boolean
    }
  },
  methods: {
    handleCommand(cmd) {
      switch (cmd) {
        case 'add':
          this.$emit('click-add', this.NodeInfo.id)
          break
        case 'edit':
          this.$emit('click-edit', this.NodeInfo.id)
          break
        case 'del':
          this.$confirm('确认要删除此部门吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            // 发请求删除
            await delDepts(this.NodeInfo.id)
            this.$emit('refresh')
          }).catch(() => {})
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  font-size: 14px;
  color: black;
  width: 100%;
  .el-col-4 {
    display: flex;
    justify-content: flex-end;
  }
  .responsible-man {
    display: inline-block;
    margin-right: 10px;
  }
}
::v-deep .el-dropdown {
  color: black;
}
</style>
